<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <link rel="stylesheet" href="../assets/css/index.css"/>
</head>
<body>
<h1>v-model</h1>
<hr>
<div id="app">
    <p>原始文本：{{message}}</p>
    <h3>文本框</h3>
    <p>v-model: <input type="text" v-model="message"></p>
    <p>v-model.lazy: <input type="text" v-model.lazy="message">输入不变,失去焦点时变化</p>
    <p>v-model.number: <input type="text" v-model.number="message">转成数字,直接可以运算</p>
    <p>v-model.trim: <input type="text" v-model.trim="message"></p>
    <hr>
    <h3>文本区域</h3>
    <textarea cols="30" rows="10" v-model="message"></textarea>
    <textarea cols="30" rows="10">{{message}} 只加载一次,不和模型绑定</textarea>

    <h3>多选按钮</h3>
    <p>
        <input type="checkbox" id="asdf" v-model="xz">
        <label for="asdf">{{xz}}</label>
    </p>

    <h3>多个按钮绑定一个数组</h3>
    <p>
    <p>
        <input type="checkbox" id="jack" value="jack" v-model="xzArray">
        <label for="jack">jack</label><br>
        <input type="checkbox" id="john" value="john" v-model="xzArray">
        <label for="john">john</label><br>
        <input type="checkbox" id="mike" value="mike" v-model="xzArray">
        <label for="mike">mike</label><br>
        <p>{{xzArray}}</p>
    </p>

    <h3>单选按钮</h3>
    <input type="radio" id="one" value="true" v-model="danxuan">
    <label for="one">true</label><br>
    <input type="radio" id="two" value="false" v-model="danxuan">
    <label for="two">false</label><br>
    <p>{{danxuan}}</p>

    <h3>选择列表</h3>
    <p>
        <select v-model="sele">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
    </p>
    <p>{{sele}}</p>
    <p>
        <select v-model="sele2" multiple>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
    </p>
    <p>{{sele2}}</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello Vue',
            xz: true,
            xzArray:[],
            danxuan:'',
            sele:'',
            sele2:[]
        }
    })
</script>
</body>
</html>